<template>
    <div class="warehouse-in">
        <!-- <div class="warehouse-in-sum">
            <span>共
            <span class="font-CE0C0C">{{ warehouseInData.total }}</span>
            <span>个记录，</span></span>
            <span class="font-CE0C0C">3000</span>
            <span> 件，</span>
            <span class="font-CE0C0C">30.600</span>
            <span>吨</span>
        </div> -->
        <van-pull-refresh v-model="warehouseInData.refreshing" @refresh="refresh">
            <van-list
                v-model:loading="warehouseInData.loading"
                :finished="warehouseInData.finished"
                finished-text="没有更多了"
                @load="getList"
                class="warehouse-in-list"
            >
                <div class="section font-size-26" v-for="item in warehouseInData.list" :key="item.dzid">
                    <div class="section-permi" v-hasPermi="['zhcloud:hwrc:detail']" @click="goDetail(item)"></div>
                    <div>
                        <div :class="[item.shztn == 0?'border-left-CE0C0C':'border-left-2CB526','title display-flex justify-between align-center']">
                            <div>
                                <span class="font-999999">进仓单号：</span>
                                <span>{{ item.pzbh }}</span>
                            </div>
                            <span class="font-CE0C0C" v-if="item.shztn == 0">{{ item.shzt }}</span>
                            <span class="font-2CB526" v-else>{{ item.shzt }}</span>
                        </div>
                        <div class="content display-flex justify-between">   
                            <div class="flex-item">
                                <div class="item display-flex">
                                    <span class="label">件数：</span>
                                    <span>{{ item.spjs }}件</span>
                                </div>
                                <div class="item display-flex">
                                    <span class="label">重量：</span>
                                    <span>{{ item.spsl }}吨</span>
                                </div>
                                <div class="item display-flex">
                                    <span class="label">车牌号：</span>
                                    <span>{{ item.dzzy6 }}</span>
                                </div>
                                <div class="item display-flex">
                                    <span class="label">仓库：</span>
                                    <span>{{ item.spckmc }}</span>
                                </div>
                                <div class="item display-flex">
                                    <span class="label">进仓日期：</span>
                                    <span>{{ item.ssrqid }}</span>
                                </div>
                            </div>
                            <div class="flex-item">
                                <div class="item display-flex">
                                    <span class="label">创建者：</span>
                                    <span>{{ item.rsopmc }}</span>
                                </div>
                                <div class="item display-flex">
                                    <span class="label">创建时间：</span>
                                    <span class="flex-item">{{ item.prrq }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
        <div class="warehouse-in-btn">
            <van-button color="#255FB6" block class="btn" @click="handleAppoint"  v-hasPermi="['zhcloud:hwrc:add']">预约进仓</van-button>
        </div>
        <van-popup v-model:show="showPopup" position="right" :before-close="beforeClose" :style="{height: '100%'}" teleport="body" class="search display-flex flex-direction justify-between">
            <div class="search-content font-size-26 font-black">
                <div>
                    <span>进仓日期</span>
                    <PeriodPicker :date1="warehouseInData.query.rqid1" :date2="warehouseInData.query.rqid2" @selectDate1="selectDate1" @selectDate2="selectDate2"/>
                </div>
                <div class="mt-30">
                    <span>仓库</span>
                    <div class="mt-20 search-item" @click="selectWarehouse">
                        <span v-if="warehouseInData.query.spckmc">{{ warehouseInData.query.spckmc1 }}</span>
                        <span class="font-666666" v-else>请选择仓库</span>
                    </div>
                </div>
                <div class="mt-30">
                    <span>车牌号</span>
                    <input v-model="warehouseInData.query.dzzy6" placeholder="支持模糊查询" class="search-item-input mt-20" />
                </div>
                <div class="mt-30">
                    <span >进仓单号</span>
                    <input v-model="warehouseInData.query.pzbh" placeholder="支持模糊查询" class="search-item-input mt-20" />
                </div>
            </div>
            <div class="display-flex search-footer justify-between">
                <van-button plain class="btn" @click="reset">重置</van-button>
                <van-button color="#255FB6" class="btn" @click="handleSearch">确定</van-button>
            </div>
        </van-popup>
        <van-action-sheet v-model:show="searchData.showSpckmc" title="请选择仓库" class="pb-30">
            <div class="select-warehouse15 display-flex flex-wrap">
                <div v-for="(item, index) in warehouse15Data.list" :key="item.spckid" :class="item.active?'active item':'item'" @click="warehouseSelected(index)">
                    <span>{{ item.spckmc }}</span>
                </div>
            </div>
        </van-action-sheet>
    </div>
</template>
<script setup lang="ts">
    import { onMounted, reactive, computed, onUnmounted } from 'vue'
    import { getWarehouseInList } from '@/api/warehouseIn'
    import { getWarehouse15 } from '@/api/warehouse'
    import searchIcon from '@/assets/images/search.png'
    import { useRouter, useRoute } from 'vue-router'
    import { msgError } from '@/utils/message'
    import type { SearchData, Warehouse15Data, WarehouseInData} from '@/type/warehouseIn'
    import { getLocalStorage, setLocalStorage } from '@/utils/localStorage'
    import PeriodPicker from '@/components/periodPicker.vue'
    import { useHeaderBarStore } from '@/store/headerBar'

    const router = useRouter()
    const route = useRoute()
    const headerBarStore = useHeaderBarStore()
    const userInfo: any = getLocalStorage('userInfo')
    const searchData: SearchData = reactive({
        showSpckmc:false
    })
    const warehouse15Data:Warehouse15Data = reactive({
        query:{},
        list:[]
    })
    const warehouseInData: WarehouseInData = reactive({
        loading:false,
        finished:false,
        refreshing: false,
        query: {
            ckcw: "",
            dzzy6: "",
            jqcz: "",
            pzbh: "",
            pzbh1: "",
            rqid1: "",
            rqid2: "",
            shzt: "",
            spbh: "",
            spckmc1: "",
            spckmc: "",
            spgh: "",
            spkhmc: userInfo.shopName,
            spkhmc1: "",
            sptm: "",
            ssrqid: "",
            wbdh: ""
        },
        list:[],
        total:0,
        params:{
            pageNum:1,
            pageSize:10
        }
    })
    const showPopup = computed(() => headerBarStore.showPopup)
    
    onMounted(() => {
        getList()
        warehouse15()
    })

    onUnmounted(() => {
        headerBarStore.showPopup = false
    })

    function getList() {
        warehouseInData.loading = true
        getWarehouseInList(warehouseInData.query, warehouseInData.params).then((res: any) => {
            warehouseInData.loading = false
            if(res.code == 200) {
                warehouseInData.total = res.total
                if(warehouseInData.total <= warehouseInData.params.pageSize) {
                    warehouseInData.list = res.rows
                } else {
                    warehouseInData.params.pageNum++
                    warehouseInData.list = warehouseInData.list.concat(...res.rows)
                }
                if(warehouseInData.list.length >= warehouseInData.total) {
                    warehouseInData.finished = true
                }
            } else {
                warehouseInData.finished = true
            }
            
        })
    }

    function warehouse15() {
        getWarehouse15({}).then(res => {
            const data = res.data
            for(let i in data) {
                data[i].active = false
            }
            warehouse15Data.list = data
        })
    }


    function selectDate1(date:string) {
        warehouseInData.query.rqid1 = date
    }
    
    function selectDate2(date:string) {
        warehouseInData.query.rqid2 = date
    }

    function selectWarehouse() {
        changeSpckmcShow()
    }

    function changeSpckmcShow() {
        searchData.showSpckmc = !searchData.showSpckmc
    }

    function warehouseSelected(index:number) {
        const data: any = warehouse15Data.list
        for(let i in data) {
            data[i].active = false
        }
        data[index].active = true
        warehouseInData.query.spckmc = data[index].spckid
        warehouseInData.query.spckmc1 = data[index].spckmc
        changeSpckmcShow()
    }

    function refresh() {
        if(warehouseInData.refreshing) {
            warehouseInData.params.pageNum = 1
            warehouseInData.list = []
            warehouseInData.total = 0
            warehouseInData.refreshing = false
        }
        warehouseInData.finished = false
        getList()
    }

    function handleAppoint() {
        setLocalStorage('warehouseIn', null)
        router.push({path:'/warehouseIn/appoint'})
    }

    function goDetail(data: any) {
        router.push({path:'/warehouseIn/detailList', query:{dzid:data.dzid}})
    }

    function changePopupShow() {
        headerBarStore.showPopup = false
    }

    function handleSearch() {
        if(warehouseInData.query.rqid1 && !warehouseInData.query.rqid2) {
            return msgError('请选择截止日期')
        }
        if(warehouseInData.query.rqid2 && !warehouseInData.query.rqid1) {
            return msgError('请选择开始日期')
        }
        warehouseInData.params.pageNum = 1
        warehouseInData.list = []
        warehouseInData.total = 0
        warehouseInData.finished = false
        getList()
        changePopupShow()
    }

    function beforeClose() {
        changePopupShow()
        //getList()
    }

    function reset() {
        warehouseInData.query = {
            ckcw: "",
            dzzy6: "",
            jqcz: "",
            pzbh: "",
            pzbh1: "",
            rqid1: "",
            rqid2: "",
            shzt: "",
            spbh: "",
            spckmc: "",
            spckmc1: "",
            spgh: "",
            spkhmc: "",
            spkhmc1: "",
            sptm: "",
            ssrqid: "",
            wbdh: ""
        }
        const data: any = warehouse15Data.list
        for(let i in data) {
            data[i].active = false
        }
    }
</script>
<style lang="scss" scoped>
    .search {
        width:584px;
        .search-content {
            padding: 69px 48px 66px; 
            .date-period-select {
                margin-top: 20px;
                .date {
                    text-align:center;
                    width:194px;
                    height:60px;
                    line-height: 60px;
                    background: #F3F4F7;
                    border-radius: 30px;
                }
                .start-date {
                    margin-right: 20px;
                } 
                .end-date {
                    margin-left: 20px;
                }
            }
            .search-item {
                text-align:center;
                width: 451px;
                height: 60px;
                line-height: 60px;
                border-radius: 30px;
                background: #F3F4F7;
                display:block;
            }
            .search-item-input {
                text-align:center;
                width: 451px;
                height: 60px;
                border-radius: 30px;
                background: #F3F4F7;
                display:block;
                border:none;
            }
        }
        .search-footer {
            padding:0 50px 80px;   
            .btn {
                width:212px;
                height: 90px;
            }    
        } 
    } 
    .select-warehouse15 {
        padding:15px 20px 30px;
        max-height: 550px;
        font-size: 26px;
        .item {
            min-width:150px;
            padding:0 20px;
            display:inline-block;
            height:60px;
            line-height: 60px;
            color:#999;
            text-align:center;
            border-radius:30px;
            border:1px solid #999;
            margin:15px;
            &.active {
                color:#fff;
                border:1px solid #255FB6;
                background:#255FB6;
            }
        }
    }
    .warehouse-in {
        &-sum {
            padding:36px;
            font-size:26px;
        }
        &-list {
            padding:36px 36px;
            .section {
                border-radius: 10px;
                background-color:#fff;
                padding:26px 26px 26px 0;
                margin-bottom:20px;
                position:relative;
                &-permi {
                    width:100%;
                    height:100%;
                    position:absolute;
                    top:0px;
                    left:0px;
                    right:0px;
                    bottom:0px;
                }
                .border-left-CE0C0C {
                    border-left:8px solid #CE0C0C;
                }
                .border-left-2CB526 {
                    border-left:8px solid #2CB526;
                }
                .title {
                    padding-left:18px;
                    margin-bottom: 26px;
                    
                }
                .content {
                    border-top:1px solid #EEEEEE;
                    margin-left:26px;
                    padding:26px 0 0;
                    .item {
                        padding-bottom:20px;
                        .label {
                            color:#999;
                            width:140px;
                            display:inline-block;
                        }
                    }
                }
                
            }
        }
        &-btn {
            position:fixed;
            bottom:0;
            left:0;
            right:0;
            padding:20px 36px;
            .btn {
                border-radius: 10px;
            }
        }
    }
</style>